<template>
  <div class="policy-container">
    <div class="policy-card relative">
      <Logo class="absolute top-6 left-6" size="small" />

      <div class="policy-header">
        <h1 class="policy-title">隐私政策</h1>
        <p class="policy-date">最后更新日期：{{ new Date().toLocaleDateString() }}</p>
      </div>

      <div class="policy-content">
        <section class="policy-section">
          <h2 class="section-title">1. 引言</h2>
          <p>
            电商工具助手（以下简称"我们"）非常重视用户的隐私和个人信息保护。本隐私政策旨在向您说明我们如何收集、使用、存储和共享您的个人信息，以及您享有的相关权利。
          </p>
          <p>在使用我们的服务前，请您务必仔细阅读并了解本隐私政策的全部内容。</p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">2. 信息收集</h2>
          <p>为了向您提供更好的服务，我们可能会收集以下类型的信息：</p>
          <h3 class="subsection-title">2.1 您主动提供的信息</h3>
          <ul class="policy-list">
            <li>账号信息：包括用户名、密码、邮箱地址等注册信息。</li>
            <li>个人资料：您在使用我们服务过程中主动提供的其他信息。</li>
          </ul>
          <h3 class="subsection-title">2.2 在您使用服务过程中自动收集的信息</h3>
          <ul class="policy-list">
            <li>设备信息：如设备型号、操作系统、唯一设备标识符、网络信息等。</li>
            <li>日志信息：如IP地址、浏览器类型、访问日期和时间、访问的页面等。</li>
            <li>位置信息：在您授权的情况下，我们可能会收集您的精确或大致位置信息。</li>
          </ul>
        </section>

        <section class="policy-section">
          <h2 class="section-title">3. 信息使用</h2>
          <p>我们可能将收集的信息用于以下目的：</p>
          <ul class="policy-list">
            <li>提供、维护和改进我们的服务。</li>
            <li>发送服务通知、更新和安全警报。</li>
            <li>响应您的请求、问题和反馈。</li>
            <li>防止欺诈和滥用行为，保障账号安全。</li>
            <li>进行统计分析以优化用户体验。</li>
            <li>遵守法律法规的要求。</li>
          </ul>
        </section>

        <section class="policy-section">
          <h2 class="section-title">4. 信息共享</h2>
          <p>我们重视您的隐私，不会将您的个人信息出售给第三方。但在以下情况下，我们可能会共享您的信息：</p>
          <ul class="policy-list">
            <li>在获得您明确同意的情况下。</li>
            <li>与我们的关联公司、业务合作伙伴共享，用于本政策所述目的。</li>
            <li>应法律法规要求、法律程序或政府部门的强制性要求。</li>
            <li>在涉及合并、收购、资产转让或类似的交易时，您的信息可能作为转让资产的一部分。</li>
          </ul>
        </section>

        <section class="policy-section">
          <h2 class="section-title">5. 信息安全</h2>
          <p>我们采取各种安全措施保护您的个人信息：</p>
          <ul class="policy-list">
            <li>使用加密技术保护数据传输和存储。</li>
            <li>实施访问控制机制，确保只有授权人员才能访问个人信息。</li>
            <li>定期审查信息收集、存储和处理实践，防止未经授权的访问。</li>
          </ul>
          <p>尽管我们采取了合理措施保护您的信息，但请注意，互联网环境并非百分之百安全，我们无法保证信息传输的绝对安全。</p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">6. 您的权利</h2>
          <p>根据适用的法律法规，您可能享有以下权利：</p>
          <ul class="policy-list">
            <li>访问权：您有权访问我们持有的关于您的个人信息。</li>
            <li>更正权：如果您认为我们持有的个人信息不准确，您有权要求更正。</li>
            <li>删除权：在某些情况下，您有权要求删除您的个人信息。</li>
            <li>限制处理权：在某些情况下，您有权限制我们对您个人信息的处理。</li>
            <li>反对权：在某些情况下，您有权反对我们处理您的个人信息。</li>
          </ul>
        </section>

        <section class="policy-section">
          <h2 class="section-title">7. Cookie和类似技术</h2>
          <p>
            我们使用Cookie和类似技术来收集和存储信息，以提供更个性化的服务和改善用户体验。您可以通过浏览器设置控制Cookie，但这可能会影响某些功能的使用。
          </p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">8. 隐私政策的变更</h2>
          <p>
            我们可能会不时更新本隐私政策。当我们进行重大变更时，我们会通过在网站上发布更新后的政策或其他适当方式通知您。我们鼓励您定期查看本隐私政策，以了解我们如何保护您的信息。
          </p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">9. 联系我们</h2>
          <p>如果您对本隐私政策有任何疑问、意见或请求，请通过以下方式联系我们：</p>
          <p>电子邮件：abc15013915547@163.com</p>
        </section>
      </div>

      <div class="policy-footer">
        <button class="return-btn cursor-pointer" @click="navigateTo('/register')">返回注册</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({ layout: 'auth' });
</script>

<style scoped>
.policy-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #f5f3ff 0%, #e0e7ff 100%);
}

.policy-card {
  background: white;
  width: 100%;
  max-width: 800px;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px rgba(107, 70, 193, 0.1);
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.logo-container:hover {
  transform: scale(1.05);
}

.logo-image {
  width: 28px;
  height: 28px;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-purple, #6b46c1);
}

.policy-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.policy-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-purple, #6b46c1);
  margin-bottom: 0.5rem;
}

.policy-date {
  color: var(--text-secondary, #64748b);
  font-size: 0.9rem;
}

.policy-content {
  margin-bottom: 2rem;
}

.policy-section {
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin-bottom: 1rem;
}

.subsection-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  margin: 1rem 0 0.5rem;
}

.policy-section p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: var(--text-primary, #1e293b);
}

.policy-list {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.policy-list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--text-primary, #1e293b);
}

.policy-footer {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-purple, #6b46c1);
  color: white;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(107, 70, 193, 0.2);
}

.return-btn:hover {
  background-color: var(--secondary-purple, #805ad5);
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(107, 70, 193, 0.3);
}

@media (max-width: 640px) {
  .policy-card {
    padding: 1.5rem;
  }
}
</style>
